<template>
  <div id="Jxz">
    <div class="left">
      <el-table
        ref="multipleTableRef"
        border
        style="width: 100%; cursor: pointer"
        @row-click="RowListData"
        :cell-class-name="getCellIndex"
        :data="useTable.tableList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" fixed="left" width="60" type="index" />
        <!-- 循环表头的数据 -->
        <template v-for="(item, index) in useTable.tableHeader" :key="item.property">
          <el-table-column :property="item.property" :label="item.lable" v-if="item.isShow" show-overflow-tooltip>
            <!-- 循环表头里有插槽 -->
            <template #default="scope" v-if="index == 1">
              <div class="scope">
                {{ scope.row.processStatus }}
              </div>
              <el-progress :percentage="scope.row.percentage" :status="setItemStatus(scope.row)" />
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.stop="copyOneData(scope.row)">复制</el-button>
            <el-button link type="primary" size="small" @click.stop="removeItemTable(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right"><el-card>表格是可以点击的</el-card></div>
  </div>
</template>

<script lang="ts" setup name="Jxz">
// Jxz数据仓库中使用
import useStore from '@/stores'
import { useRouter } from 'vue-router'
import type { dshList } from '@/data/tableData/tableType'
// 引入事件总线并切换路由的时候卸载
import bus from '@/libs/bus'
// hooks
import { useDark } from '@/hooks/useCommon'
const { col, getCellIndex } = useDark()
// 依赖
const { useTable } = useStore()
const router = useRouter()

// 点击每一行进入对应的详情页详情页是一个组件缓存
const tableRow = ref()
const RowListData = async (row: dshList, column: any, event: any) => {
  tableRow.value = row
  col(column, pushPage)
}
const pushPage = () => {
  const id = tableRow.value.id
  const row = tableRow.value
  console.log('🚚...  信息', id, row)
  if (['已配舱', '已下单', '已装箱', '已清关', '已报关'].includes(row.processStatus)) {
    sessionStorage.setItem('row', JSON.stringify(row))
    router.push({
      path: `/table/tableTabs/detailed/${id}`,
      query: {
        name: row.processStatus
      }
    })
    return
  }
}

// 批量删除
const handleSelectionChange = (val: dshList[]) => {
  const ids = val.map((item) => {
    return item.id
  })
  useTable.ids = ids
  console.log('🌈成功->val', val, ids)
}
// 删除
const removeItemTable = (row: number) => {
  useTable.tabsTableDel(row)
}
// 复制,名字会变
const copyOneData = (row: dshList) => {
  const arr = JSON.parse(JSON.stringify(row))
  arr.orderNumber = row.orderNumber.slice(0, 6) + Math.ceil(Math.random() * 100)
  arr.warehouseNumber = row.orderNumber.slice(0, 6) + Math.ceil(Math.random() * 100)
  arr.unit = row.orderNumber.slice(0, 5) + Math.ceil(Math.random() * 100)
  arr.number = row.orderNumber.slice(0, 5) + Math.ceil(Math.random() * 100)
  arr.id = row.id + Math.ceil(Math.random() * 100)
  useTable.dshList.unshift(arr)
  console.log('🌈成功->复制', arr)
}

// 进度条
const setItemStatus = (item: any): string | undefined => {
  if (item.percentage == 100) {
    return 'success'
  }
}

bus.$on('del', () => {
  useTable.tabsTableDelAll()
})
</script>

<style lang="scss" scoped>
#Jxz {
  display: flex;
  .left {
    width: 90%;
  }
  .right {
    margin-left: 10px;
  }
}
</style>
